<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮式标签</title>
<!-- 此文件为了显示Demo样式，项目中不需要引入 -->
<link href="../../assets/code/demo.css" rel="stylesheet">
 
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
 
</head>
<body>
  <div class="demo-content">
    <div id="tab"></div>
    <div class="row">
      <div id="log" class="span8 well">
        
      </div>
    </div>
    
 
  <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
  <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
 
<!-- script start --> 
    <script type="text/javascript">
          BUI.use('bui/tab',function(Tab){
      
        var tab = new Tab.Tab({
            render : '#tab',
            elCls : 'button-tabs',
            autoRender: true,
            children:[
              {text:'标签一',value:'1'},
              {text:'标签二',value:'2'},
              {text:'标签三',value:'3'}
            ]
          });
        tab.on('selectedchange',function (ev) {
          var item = ev.item;
          $('#log').text(item.get('text') + ' ' + item.get('value'));
        });
        tab.setSelected(tab.getItemAt(0));
      
      });
      
    </script>
<!-- script end -->
  </div>
</body>
</html>